<template>
  <div class="param-info" v-if="Object.keys(paramInfo).length != 0">
    <table class="size">
      <tr class="size-tr" v-for="(item,index) in paramInfo.sixes[0]" :key="index">
        <td
          :style="{'color': index != 0 && k != 0 ? '#eb4868' : '#333'}"
          class="size-td"
          v-for="(v, k) in item"
          :key="k"
        >{{v}}</td>
      </tr>
    </table>
    <ul class="infos">
      <li class="infos-item" v-for="(item,index) in paramInfo.infos" :key="index">
        <span class="infos-key">{{item.key}}</span>
        <span class="infos-value">{{item.value}}</span>
      </li>
    </ul>
    <div class="param-img" v-if="paramInfo.image.trim().length !== 0">
      <img :src="paramInfo.image" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: "detail-param-info",
  props: {
    paramInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style scoped>
.param-info {
  padding-top: 20px;
  padding: 20px 15px;
  background: #fff;
  font-size: 14px;
}
.size {
  width: 100%;
  border-spacing: 0;
}
.size-tr {
  display: flex;
  width: 100%;
}
.size-tr td {
  flex: 1;
}
.size-tr :first-child {
  flex: 0 1 80px;
}
.size-td {
  padding: 10px 0;
  border-bottom: 1px solid #f3f3f3;
}
.infos-item {
  list-style-type: none;
  padding: 10px 0;
  border-bottom: 1px solid #f3f3f3;
  display: flex;
}
.infos-key {
  display: inline-block;
  width: 80px;
}
.infos-value {
  display: inline-block;
  flex: 1;
  color: #eb4868;
}
.param-img img {
  width: 100%;
}
</style>